<template>
  <div id="public">
    <!--搜索-->
    <div class="search-content">
      <div style="display:flex;flex-wrap: wrap">
        <el-card shadow="never" class="card card1">
          <i class="el-icon-document-checked"></i>
          总订单数：{{count.totalNum}}
        </el-card>
        <el-card shadow="never" class="card card2">
          <i class="el-icon-document-checked"></i>
          总金额：{{count.totalMoney}}
        </el-card>
        <el-card shadow="never" class="card card3">
          <i class="el-icon-document-checked"></i>
          总退款金额：{{count.totalRefund}}
        </el-card>
      </div>
      <el-input v-model="name" placeholder="请输入用户昵称查询" prefix-icon="el-icon-search" clearable @change="inquiryList"/>
      <el-input v-model="agentName" placeholder="请输入代理名称查询" prefix-icon="el-icon-search" clearable
                @change="inquiryList"/>
      <el-input v-model="order" placeholder="请输入订单编号查询" prefix-icon="el-icon-search" clearable @change="inquiryList"/>
      <el-select v-model="status" clearable placeholder="请选择订单状态" @change="inquiryList">
        <el-option
          v-for="item in statusList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-date-picker
        v-model="dateTimeRange[0]"
        type="datetime"
        clearable
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="开始日期">
      </el-date-picker>
       <el-date-picker
        v-model="dateTimeRange[1]"
        type="datetime"
        clearable
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="结束日期">
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search" @click="inquiryList">查询</el-button>
    </div>
    <!--操作列表-->
    <div class="table">
      <el-table fit :data="tableData" style="width: 100%">
        <el-table-column label="用户昵称" prop="member" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.member">{{scope.row.member.name}}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column label="订单编号" prop="sn" align="center"/>
        <el-table-column label="订单状态" prop="status" align="center">
          <template slot-scope="scope">
            <el-tag size="small" v-if="scope.row.status=='unpaid'"  type="info">未支付</el-tag>
            <el-tag size="small" v-if="scope.row.status==='success'">支付成功</el-tag>
            <el-tag size="small" v-if="scope.row.status==='fail'" type="warning">支付失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="充值金额" prop="money" align="center"/>
        <el-table-column label="已退款金额" prop="refundMoney" align="center"/>
        <el-table-column label="订单支付成功时间" prop="successTime" align="center"/>
        <el-table-column label="下单时间" prop="createDate" align="center"/>
        <el-table-column label="充值备注" prop="remarks" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.remarks==null||scope.row.remarks.length<20">{{scope.row.remarks}}</span>
            <el-tooltip v-else :content="scope.row.remarks" placement="top">
              <span>{{scope.row.remarks.substring(0,19)+"..."}}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="dealwithView(scope.$index, scope.row)">订单详情</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <!--分页-->
      <div class="pagination">
        <el-pagination
          :current-page.sync="currentPage"
          :page-sizes="[10,20,30,40,50]"
          layout="total,sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!--详情蒙层-->
    <el-dialog id="view-dialog" title="订单详情" :visible.sync="viewDialogVisible" v-if="detailData">
      <el-form label-position="right" label-width="100px" :model="detailData">
        <div>
          <el-form-item label="用户昵称：" v-if='detailData.member'>
            <div>{{detailData.member.name}}</div>
          </el-form-item>
          <el-form-item label="订单编号：">
            <div>{{detailData.sn}}</div>
          </el-form-item>
          <el-form-item label="订单状态：">
            <el-tag size="small" v-if="detailData.status==='unpaid'" type="danger">未支付</el-tag>
            <el-tag size="small" v-if="detailData.status==='success'" type="success">支付成功</el-tag>
            <el-tag size="small" v-if="detailData.status==='fail'" type="warning">支付失败</el-tag>
          </el-form-item>
          <el-form-item label="充值金额：">
            <div>{{detailData.money}}</div>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="用户名称：" v-if="detailData.member">
            <div>{{detailData.member.userName}}</div>
          </el-form-item>
          <el-form-item label="代理名称：" v-if="detailData.agent">
            <div>{{detailData.agent.userName}}</div>
          </el-form-item>
          <el-form-item label="下单时间：">
            <div>{{detailData.createDate}}</div>
          </el-form-item>
          <el-form-item label="支付时间：" v-if="detailData.status==='success'">
            <div>{{detailData.successTime}}</div>
          </el-form-item>
          <el-form-item label="充值备注：">
            <div>{{detailData.remarks}}</div>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer"></span>
    </el-dialog>
  </div>
</template>

<script>
  import {Message} from 'element-ui';
  import request from "../../utils/request";

  export default {
    name: "recordOrder",
    data() {
      return {
        // 查询
        name: "",
        order: "",
        agentName: '',
        status: null,
        statusList: [
          {
            value: 0,
            label: '未支付'
          },
          {
            value: 1,
            label: '支付成功'
          },
          {
            value: 2,
            label: '支付失败'
          }
        ],
        dateTimeRange: [],
        isClearable: true,
        // 列表数据
        tableData: [],
        //详情
        viewDialogVisible: false,
        detailData: {},
        //分页
        currentPage: 1,
        pageSize: 10,
        total: 0,
        count:{
          totalNum: 0,
          totalMoney: 0,
          totalRefund: 0
        }
      }
    },
    mounted() {
      this.inquiryList();
    },
    methods: {
      isNotNull(value) {
        return value !== null && value !== undefined && value !== "";
      },
      //查询列表
      inquiryList() {
        let that = this;
        that.tableData = [];
        let data = {
          pageNumber: that.currentPage,
          pageSize: that.pageSize,
          filters: []
        };
        if (that.isNotNull(that.name)) { //用户昵称
          data.filters.push({
            property: "m.name",
            value: that.name,
            operator: "like"
          })
        }
        // if (that.isNotNull(that.agentName)) { //代理名称
        //   data.filters.push({
        //     property: "a.name",
        //     value: that.agentName,
        //     operator: "like"
        //   })
        // }
        if (that.isNotNull(that.order)) { //订单编号
          data.filters.push({
            property: "ro.sn",
            value: that.order,
            operator: "eq"
          })
        }
        if (that.isNotNull(that.status)) { //订单状态
          data.filters.push({
            property: "ro.status",
            value: that.status,
            operator: "eq"
          })
        }
        if (this.isNotNull(that.dateTimeRange)) { //下单时间
          data.filters.push({
            property: "ro.create_date",
            value: that.dateTimeRange[0],
            operator: "ge"
          });
          data.filters.push({
            property: "ro.create_date",
            value: that.dateTimeRange[1],
            operator: "le"
          })
        }
        request({
          method: 'post',
          url: '/agent/recordOrder/list',
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
          data: data
        }).then(function (res) {
          if (res.code === 200) {
            that.total = res.data.total;
            let arr = res.data.records;
            if (arr.length === 0) {
              that.tableData = [];
            } else {
              that.tableData = arr
            }
          }
        }).catch(function (error) {
          console.log(error);
        });
        //查询统计参数
        request({
          method: 'post',
          url: '/agent/recordOrder/list/count',
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
          data: data
        }).then(function (res) {
          if (res.code === 200) {
            that.count = res.data
          }
        }).catch(function (error) {
          console.log(error);
        });
      },
      //详情
      dealwithView(index, row) {
        this.detailData = row;
        this.viewDialogVisible = true;
      },
      // 改变每页显示的数量
      handleSizeChange(val) {
        this.pageSize = val;
        this.inquiryList();
      },
      //改变当前页
      handleCurrentChange(val) {
        this.currentPage = val;
        this.inquiryList();
      }
    }
  }
</script>

<style scoped src="../../assets/css/publicCss/publicStyle.css">

</style>

